<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img :src="swiperr" alt="">
                <van-button round type="success" @click="goform">
                    <van-icon name="arrow-left" />
                </van-button>
            </van-swipe-item>
            <van-swipe-item>
                <img :src="swiperr1" alt="">
                <van-button round type="success" @click="goform">
                    <van-icon name="arrow-left" />
                </van-button>
            </van-swipe-item>
        </van-swipe>
        <p>{{ text }}</p>
        <p class="pri">{{ price }}￥</p>
        <hr>
        <div class="zhong">
            <p>运费：{{ product_num }}</p>
            <p>剩余：{{ num }}</p>
            <p>收藏：<van-icon name="like-o" /></p>
        </div>
        <hr>
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab title="商品详情">
                <ul class="spxq">
                    <li> <img :src="swiperr2" alt=""></li>
                    <li> <img :src="swiperr3" alt=""></li>
                    <li> <img :src="swiperr4" alt=""></li>
                </ul>
            </van-tab>
            <van-tab title="商品评论">
                <ul class="pinglun">
                    <li v-for=" item in pldata">
                        <p class="top">
                            <van-image round width="3rem" height="3rem" :src="item.user_img" />
                        <p>{{ item.user_name }}</p>
                        <p>{{ item.pro_date }}</p>
                        </p>
                        <p>{{ item.pro_content }}</p>
                        <p><van-rate v-model="item.express_star" :size="25" color="#ffd21e" void-icon="star"
                                void-color="#eee" />
                        </p>
                        <p><van-rate v-model="item.pro_star" :size="25" color="#ffd21e" void-icon="star"
                                void-color="#eee" />
                        </p>
                        <p> <van-rate v-model="item.serve_star" :size="25" color="#ffd21e" void-icon="star"
                                void-color="#eee" />
                        </p>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
        <van-action-bar placeholder>
            <van-action-bar-icon icon="shop-o" text="首页" />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="12" @click="gocart" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addcart" />
            <van-action-bar-button type="danger" text="立即购买" @click="" />
        </van-action-bar>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <van-stepper v-model="value" min="1" max="8" />
            <van-action-bar placeholder>
                <van-action-bar-icon icon="shop-o" text="首页" />
                <van-action-bar-icon icon="cart-o" text="购物车" badge="12" />
                <van-action-bar-button type="warning" text="加入购物车" @click="addcart1" />
                <van-action-bar-button type="danger" text="立即购买" @click="" />
            </van-action-bar>
        </van-popup>

    </div>
</template>

<script setup lang='ts'>
import { xqapi, pinglun, addShoppingCart } from '@/api/http';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
import router from '@/router';

const Route = useRoute()
const gocart = () => {
    router.push('/cart')
}
const goform = () => {
    history.back()
}
let idd: any = Route.query.type
console.log(Route.query.type);
let show = ref(false)
let value = ref(1)
let swiperr: any = ref()
let swiperr1: any = ref()
let swiperr2: any = ref()
let swiperr3: any = ref()
let swiperr4: any = ref()
// let uc: any = localStorage.getItem('user_code')
console.log(555555555, localStorage.getItem('user_code'));

let text = ref()
let price = ref()
let num = ref()
let product_num = ref()
let product_id = ref()
const active = ref(0);
const pldata = ref()
const onClickTab = () => {
    // 评论的接口
    if (active.value == 1) {
        pinglun({
            pro_id: product_id.value
        }).then((res: any) => {
            console.log('评论的接口', res);
            pldata.value = res.responseData
        })
    }
};
onMounted(() => {
    xqapi({ product_id: idd }).then((res: any) => {
        console.log('商品的详情', res);
        swiperr.value = res.responseData.product_top_img_1
        swiperr1.value = res.responseData.product_top_img_2
        swiperr2.value = res.responseData.product_btm_img_1
        swiperr3.value = res.responseData.product_btm_img_2
        swiperr4.value = res.responseData.product_btm_img_3
        text.value = res.responseData.product_name
        price.value = res.responseData.product_present_price
        num.value = res.responseData.product_surplus_num
        product_num.value = res.responseData.product_num
        product_id.value = res.responseData.product_id
        console.log(swiperr.value);
    })
})
// 加入购物车
const addcart = () => {
    show.value = true

}
// 加入购物车
const addcart1 = () => {
    show.value = false
    addShoppingCart({
        shop_userCode: localStorage.getItem('user_code'),
        shop_proTitle: text.value,
        shop_proPrice: price.value,
        shop_proImg: swiperr.value,
        shop_proCount: value.value,
        shop_proId: Route.query.type,
    }).then(res => {
        console.log(res);
    })
}
</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;

    .pri {
        color: orange;
    }

    hr {
        width: 100%;
        height: 0.01rem;
        border: none;
        background-color: #ccc;
    }

    .zhong {
        display: flex;
        justify-content: space-around;
    }

    .spxq {
        width: 100%;

        li {
            width: 100%;

            img {
                width: 100%;
            }
        }
    }

    .pinglu {
        width: 100%;

        li {
            width: 100%;
            margin-bottom: 5rem;

            .top {
                display: flex;
                justify-content: space-around;
            }
        }
    }
}

.my-swipe .van-swipe-item {
    position: relative;
    width: 100%;
    height: 20rem;
    background-color: #39a9ed;

    img {
        width: 100%;
        height: 100%;
    }

    .van-button {
        position: absolute;
        float: left;
        left: 1rem;
        top: 1rem;
    }
}
</style>